import { Pagination } from 'antd'
import { connect } from 'dva'

import AekSpin from '@/components/AekSpin'
import PageLayout from '@/components/PageLayout'
import SearchForm from '@/components/SearchForm'
import { namespace } from '@/models/pcs/gwOrders'
import { getPagination } from '@/utils/antdHelper'
import { getBasicFn } from '@/utils/dvaUtil/index'

import CommodityCard from './components/CommodityCard'

/** 陪护 - 商品管理 */
const Index = ({ modelState, loading }) => {
  const { pageList, pagination, searchParams } = modelState
  const { toAction, getLoading } = getBasicFn({ namespace, loading })

  /** @type {import("@/components/SearchForm").SearchFormProps} */
  const searchProps = {
    searchParams,
    formData: [
      {
        field: 'commodityName',
        label: '商品名称',
        component: {
          name: 'Input',
        },
      },
      {
        field: 'commodityModel',
        label: '规格型号',
        component: {
          name: 'Input',
        },
      },
    ],
    onSearch: values => {
      toAction({ searchParams: values })
      toAction({ pagination: { current: 1 } }, true)
      toAction('getPageList')
    },
  }

  return (
    <PageLayout>
      <SearchForm {...searchProps} />
      <div className='mb-2 h-full overflow-auto'>
        <AekSpin spinning={getLoading('getPageList')}>
          {pageList.map(commodity => (
            <CommodityCard key={commodity.id} commodity={commodity} />
          ))}
        </AekSpin>
      </div>
      <Pagination
        align='end'
        {...getPagination(pagination, (current, pageSize) => {
          toAction('getPageList', { current, pageSize })
        })}
      />
    </PageLayout>
  )
}

export default connect(store => ({
  modelState: store[namespace],
  loading: store.loading,
}))(Index)
